/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

 import React, {Component} from 'react';
 import {Platform, StyleSheet, Text, View,Image,Dimensions,Button,Alert} from 'react-native';
 import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
 import MainTabNav from './app/MainPage';
 import Colors from './app/res/Colors';
 import Constants from './app/res/Constants';

 const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
  'Double tap R on your keyboard to reload,\n' +
  'Shake or press menu button for dev menu',
});


 class StartPage extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isClick:false,
    };
    this._isClick = false;
    this._timer = null;
   
  }

  componentWillMount(){
    console.log("componentWillMount")
    //计时跳转到首页
    this._timer = setTimeout(()=>{

      console.log("setTimeout"+this._isClick)
      if(!this._isClick){
        this._alert('跳转提示','是否跳转首页？','ok','cancel');
      }

     },5000);

  }
  componentWillUnmount(){
    this._timer && clearTimeout(this._timer);
  }

  _alert(title,msg,positive,negative){
     Alert.alert(
       title,
        msg,
        [
          {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
          {text: negative, onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
          {text: positive, onPress: () => this._alertPositivePressed()},
        ],
        { cancelable: false }
      )
  }

  _alertPositivePressed(){
     console.log('OK Pressesd: '+this._isClick)
     this._buttonPress();
  }  

  componentDidMount(){
    console.log("componentDidMount")
  }

  componentDidUpdate(){
    console.log("componentDidUpdate")
  }

  shouldComponentUpdate(){
    console.log("shouldComponentUpdate")
  }

  componentWillUpdate(){
    console.log("componentWillUpdate")
  }
  componentWillReceiveProps(){
    console.log("componentWillReceiveProps")
  }

  componentWillUnmount(){
    console.log("componentWillUnmount")
  }

  render() {

    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };

    return (
      <View style={styles.container}>
      <View style={styles.main}>
      <Image source = {pic} style = {{width:100,height:100}}/>
      <Text style={styles.welcome}> Welcome to React Native !</Text>
      <Text style={styles.instructions}>To get started, edit App.js</Text>
      <Text style={styles.instructions}>{instructions}</Text>
      <Button onPress={() => this._buttonPress()} title="Learn More" color="#841584" accessibilityLabel="test"/>
      </View>
      <View style={styles.bottomContent}>
      <Image source={require('./app/res/images/app_icon.png')} style = {{width:70,height:70}} />
      </View>
      </View>
      );
  }

  _buttonPress(){
      this._isClick = true;
      console.log("onPress" + this._isClick)
      this.props.navigation.dispatch(StackActions.reset({
        index: 0,
        actions: [
        NavigationActions.navigate({ routeName: 'MainPage' })
        ],
      }))
    }

}



const AppNavigator = createStackNavigator({
  StartApp: {
    screen: StartPage,
    navigationOptions: ({navigation}) => ({
      header: null
    })
  },
  MainPage:{
   screen: MainTabNav,
   navigationOptions: ({navigation}) => ({
    header: null
  })
 },

}, {
  initialRouteName: 'StartApp',
});

export default createAppContainer(AppNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  main:{
    flex:6,
    backgroundColor:'#F5FCFF',
    alignItems: 'center',
    justifyContent:'center',
  },
  bottomContent:{
    flex:1,
    width:Constants.window_width,
    justifyContent:'center',
    backgroundColor:Colors.blue,
    alignItems: 'center',
  },
});
